<template>
  <div>
    <div id="fore">
        <button @click="get">get</button>
        <div id="date">
        <!-- <div v-for="(item,index) in many_weather" :key="index">{{ item[index][fxDate] }}</div> -->
            <div @click="change(0)">2025-08-23</div>
            <div @click="change(1)">2025-08-24</div>
            <div @click="change(2)">2025-08-25</div>
        </div>
            <div id="weather">
            <div>tempMax  {{ tempMax }}</div>
            <div>tempMin  {{ tempMin }}</div>
            <div>textDay  {{ textDay }}</div>
            <div>textNight  {{ textNight }}</div>
            <div>humidity  {{ humidity }}</div>
            <div>precip  {{ precip }}</div>
        </div>
    </div>
    <div id="now">
        <input type="text" v-model="when" @keydown.enter="now_weather">
        <div>
            {{ nowweather }}
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            when:'',
            many_weather:[],
            tempMax:'',
            tempMin:'',
            textDay:'',
            textNight:'',
            humidity:'',
            precip:'',
            nowweather:{}
        }
    },
    methods:{
        async get(){
            const res = await axios.get('https://m1.apifoxmock.com/m1/6488085-0-default/forecast')
            this.many_weather=res.data.daily
        },
        async now_weather(){
            const res = axios.get('https://m1.apifoxmock.com/m1/6488085-0-default/weatherNow',{
                params:{
                    location:this.when
                }
            })
            this.nowweather=res.data
            console.log(this.nowweather);
        },
        change(index){
            this.tempMax=this.many_weather[index].tempMax
            this.tempMin=this.many_weather[index].tempMin
            this.textDay=this.many_weather[index].textDay
            this.textNight=this.many_weather[index].textNight
            this.humidity=this.many_weather[index].humidity
            this.precip=this.many_weather[index].precip
        }
    }

}
</script>

<style>

</style>